<template>
  <div class="header">
    <div><h1>预留空间</h1></div>

    <!-- <Crumbs @getbBreadList="getbBreadList" /> -->
    <!-- 面包屑 -->
    <!-- 面包屑（放到你想要放的template中的位置） -->
    <el-breadcrumb separator=">">
      <!-- <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> -->
      <template v-for="(item, index) in breadList">
        <el-breadcrumb-item
          v-if="item.meta.name"
          :key="index"
          :to="item.path"
          >{{ item.meta.name }}</el-breadcrumb-item
        >
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";

let router = useRouter();
let route = useRoute();
let breadList = ref();
let getMatched = () => {
  console.log(route.matched);
  breadList.value = route.matched.filter((item) => item.meta && item.meta.name);
};
onMounted(() => {
  getMatched();
});

watch(
  () => route.path,
  (newValue, oldValue) => {
    //监听路由路径是否发生变化，之后更改面包屑
    breadList.value = route.matched.filter(
      (item) => item.meta && item.meta.name
    );
  }
);
</script>


<style scoped>
.header {
  background: #4afff6;
}
</style>